<template>
  <div class="set_nickname">
    <van-cell-group>
      <van-field v-model="nickName" label="昵称"/>
    </van-cell-group>

    <div class="bottom_btn">
      <van-button size="large" type="danger" @click="saveNick">保存</van-button>
    </div>
  </div>
</template>

<script>
  import {authProfile} from '@/api/api';
  import {Field} from 'vant';

  export default {
    data() {
      return {
        nickName: ''
      };
    },

    created() {
      this.getNick();
    },

    methods: {
      getNick() {
        this.nickName = localStorage.getItem('nickName') || '';
      },
      saveNick() {
        authProfile({nickname: this.nickName}).then(res => {
          localStorage.setItem('nickName', this.nickName);
          this.$dialog.alert({message: '保存成功'}).then(() => {
            this.$router.go(-1);
          });
        });
      }
    },

    components: {
      [Field.name]: Field
    }
  };
</script>

<style scoped>
  .bottom_btn {
    padding: 30px 15px 0 15px;
  }
</style>
